import React, { Component } from 'react'
import { Divider, Input, Button, Icon, Table, Popconfirm } from 'antd';
import styles from './index.less'
import {setSessionData, getSessionData} from '@/utils/localData'

export default class TelBookContent extends Component {

    state = {
        delTelId: false
    }

    fn = (id) =>{
        let _this=this
        let nid = id
        return function () {
            const { dispatch, selectedNode, selName, selPhone, page } = _this.props
            document.ondragstart=function(ev){
                //console.log(nid)
                setSessionData("dragStartId", nid)
            }
            document.ondragend =function(){
                //console.log("done")
                //console.log(getSessionData("dragEnterId"), getSessionData("dragStartId"))
                dispatch({
                    type: "telBook/fetchUpdateTelBookForGroup",
                    payload: {
                        groupId: selectedNode.id ? selectedNode.id : null,
                        selName: selName,
                        selPhone: selPhone,
                        page: page,
                        upAddInfo: {
                            id: getSessionData("dragStartId"),
                            groupId: getSessionData("dragEnterId")
                        }
                    }
                })

            }
        }
    }

    columns = [{
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
      },{
        title: '电话号',
        dataIndex: 'phone',
        key: 'phone',
      },{
        title: '分组',
        dataIndex: 'groupName',
        key: 'groupName',
      },{
        title: '性别',
        dataIndex: 'sex',
        key: 'sex',
      },{
        title: '职务',
        dataIndex: 'duties',
        key: 'duties',
      },{
        title: '固定电话',
        dataIndex: 'landTel',
        key: 'landTel',
      },{
        title: '集团小号',
        dataIndex: 'cliqueTel',
        key: 'cliqueTel',
      }, {
        title: '操作',
        key: 'action',
        render: (text, record) => (
          <span>
            <a 
                onMouseDown={this.fn(record.id)}
                href="javascript:;" onClick={()=>{
                const { dispatch } = this.props
                dispatch({
                    type: 'telBook/setUpAddInfo',
                    payload: {
                        title: "修改通讯录信息",
                        visible: true,
                        action: "telBook/fetchUpdateTelBook",
                        isUpdate: true,
                        id: record.id,
                        groupId: record.groupId,
                        name: record.name,
                        sex: record.sex,
                        duties: record.duties,
                        phone: record.phone,
                        landTel: record.landTel,
                        cliqueTel: record.cliqueTel
                    }
                })
                }} >编辑</a>
            <Divider type="vertical" />
            <Popconfirm title="确定要删除这条通讯录?" onConfirm={this.confirm} okText="Yes" cancelText="No">
                <a href="javascript:;" onClick = {()=>{
                        this.setState({
                            delTelId: record.id,
                        });
                    }}>删除</a>
            </Popconfirm>
          </span>
        ),
      }];

    confirm = () =>{
        const { dispatch, selectedNode, selName, selPhone } = this.props
        dispatch({
            type: "telBook/fetchDelTelBook",
            payload: {
                groupId: selectedNode.id ? selectedNode.id : null,
                name: selName,
                phone: selPhone,
                page: 1,
                id: this.state.delTelId
            }
        })
    }

    setPage = (e) =>{
        const { dispatch, selectedNode, selName, selPhone } = this.props
        dispatch({
            type: 'telBook/fetchSelTelBookByUserId',
            payload: {
                name: selName,
                phone: selPhone,
                page: e,
                groupId: selectedNode.id ? selectedNode.id : null
            }
        })
    }

    render() {
        const { 
                selectedNode, //获取选中分组节点信息
                fetchSelTelBookByUserIdLoading, 
                telList, 
                page, 
                total 
                } = this.props
        return (
            <div className = {styles.telBookContent}>
                <div className = {styles.query}>
                    <div className = {styles.search}>
                        <Input value = {selectedNode.name?selectedNode.name:"全部分组"} 
                        className = {styles.inpt} disabled = {true} />
                        {
                            selectedNode.name?
                            <Icon style={{ color: '#801919',marginTop:'5px',marginLeft: '5px' }} type="close" 
                                onClick = {()=>{
                                    const { dispatch } = this.props
                                    dispatch({
                                        type: 'telBook/setSelectedNode',
                                        payload: {
                                            id: false,
                                            name: false
                                            }
                                    })
                                }}
                            />
                            : null
                        }
                        <Input placeholder = "姓名" className = {styles.inpt} onChange = {(e)=>{
                            const { dispatch } = this.props
                            dispatch({
                                type: 'telBook/setSelName',
                                payload: e.target.value
                            })
                        }}/>
                        <Input placeholder = "电话" className = {styles.inpt} onChange = {(e)=>{
                            const { dispatch } = this.props
                            dispatch({
                                type: 'telBook/setSelPhone',
                                payload: e.target.value
                            })
                        }}/>
                        <Button style = {{'marginLeft':'20px'}} type="primary" onClick = {()=>{
                            const { dispatch, selectedNode, selName, selPhone, page } = this.props
                            dispatch({
                                type: 'telBook/fetchSelTelBookByUserId',
                                payload: {
                                    name: selName,
                                    phone: selPhone,
                                    page: page,
                                    groupId: selectedNode.id ? selectedNode.id : null
                                }
                            })
                        }}>查询</Button>
                    </div>
                </div>
                <Divider/>
                <div className = {styles.content}>
                    <Table 
                        style={{ width:"100%" }}
                        loading={fetchSelTelBookByUserIdLoading}
                        columns={this.columns} 
                        dataSource={telList} 
                        pagination = {{
                            current: page,
                            total: total,
                            onChange: this.setPage
                        }}
                        />
                </div>
            </div>
        )
    }
    componentDidMount(){
        const { dispatch,  } = this.props
        dispatch({
            type: 'telBook/fetchSelTelBookByUserId',
            payload: {
                page: 1
            }
        })
    }

}
